
<!DOCTYPE html>
<html ng-app="babyApp">
<head lang="en">
  <meta charset="UTF-8">
  <title>404 公益广告 宝贝回家</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <link type="text/css" rel="stylesheet" href="css/animate.min.css"/>
  <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
  <link type="text/css" rel="stylesheet" href="css/index.css"/>
</head>
<body>
  <div class="container" ng-controller="MainCtrl">
    <div class="row">
      <div class="search-child form-inline">
        <span class="glyphicon glyphicon-user hand-behavior" ng-click="userKeyword = ''"></span>
        <input type="text" class="form-control" placeholder="快速寻人搜索" ng-model="userKeyword" />
        <span class="glyphicon glyphicon-search"></span>
        <select class="form-control" ng-model="userSex">
          <option value="">性别</option>
          <option>男</option>
          <option>女</option>
        </select>
      </div>
      <h1 class="text-center title"><a href="javascript: history.back()">Back</a>… 404 Not Found. 寻找孩子的任务还得继续</h1>
    </div>
    <div class="row">
      <div class="col-xs-4 child-info img-rounded repeater" ng-repeat="child in children | filter: userKeyword | filter: {sex: userSex}">
        <img align="left" class="img-thumbnail hand-behavior" 
             ng-src="{{child.child_pic}}" 
             onerror="this.src = defaultBabyImg"
             onMouseOver="$(this).popover('show')" 
             onMouseOut="$(this).popover('hide')" 
             data-placement="right"
             data-content="特征描述：{{child.child_feature | clearHtml}}" 
             data-toggle="modal" 
             data-target=".bs-example-modal-lg"
             ng-click="getCurrentChild(child)" />
        <ul onclick="$(this).removeClass().addClass('flipInX animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){$(this).removeClass();});">
          <li class="child-name">姓名：{{child.name}}({{ child.birth_time | olderFilter }}岁)</li>
          <li>性别：{{child.sex}} &nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-arrow-right"></span><span class="glyphicon glyphicon-arrow-right"></span>失踪{{ child.lost_time | lostYearFilter }}</li>
          <li>出生日期：{{child.birth_time}}</li>
          <li>失踪时间：{{child.lost_time}}</li>
          <li>失踪地点：{{child.lost_place}}</li>
        </ul>
        <span class="child-index"><span class="glyphicon glyphicon-eye-open"></span>{{$index+1}}</span>
      </div>
    </div>
    <div class="modal fade bs-example-modal-lg text-center" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title child-name">{{currentChild.name}}，赶快回家吧
              <span class="glyphicon glyphicon-heart" ng-repeat="star in currentChild.stars track by $index">{{ v }}</span></h4>
          </div>
          <div class="modal-body">
            <p class="child-feature">特征描述：{{currentChild.child_feature}}</p>
            <a target="_blank" ng-href="{{ currentChild.url }}" title="出生日期：{{currentChild.birth_time}}&#013;失踪时间：{{currentChild.lost_time}}&#013;失踪地点：{{currentChild.lost_place}}&#013;&#013;若想获取<{{currentChild.name}}>的更多详情，请点击图片">
              <img ng-src="{{ currentChild ? currentChild.child_pic : defaultBabyImg}}" alt="失踪地点：{{currentChild.lost_place}}" class="img-rounded" onerror="this.src = defaultBabyImg" />
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/angular.min.js"></script>
  <script type="text/javascript" src="js/angular-animate.min.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</body>
</html>